<template>
  <h2>{{stateCN[state]+'的农产品'}}</h2>
  <el-table :data="payFarmCropsTable" style="width: 100%">
    <el-table-column type="expand" label="地址" width="60px">
      <template #default="props">
        <div style="padding: 0 80px; box-sizing: border-box">
          <p>收货地区: {{ CodeToText[props.row.address.province] }} / {{ CodeToText[props.row.address.city] }} / {{ CodeToText[props.row.address.area] }}</p>
          <p>详细地址: {{ props.row.address.addressDetail }}</p>
          <p>联系方式: {{ props.row.address.phoneNum }}</p>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="农产品名称" prop="produceName" width="200px" />
    <el-table-column label="农产品图片" width="100px" >
      <template #default="scope">
        <div style="display: flex; align-items: center" >
          <el-image :src="this.staticResourcesUrl+scope.row.img" fit="cover" style="max-height: 50px">
            <template #error>
              <div class="image-slot">
                <el-icon><picture /></el-icon>
              </div>
            </template>
          </el-image>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="农产品份数" prop="produceCounts" width="100px" />
    <el-table-column label="农产品单价" prop="producePrice" width="100px" />
    <el-table-column label="农产品总价" prop="produceTotalPrice" width="100px" />
    <el-table-column label="农产品状态" width="100">
      <el-tag
          :type="stateTag[state]"
          effect="light"
          round
      >
        {{ stateCN[state] }}
      </el-tag>
    </el-table-column>
    <el-table-column label="购买日期" prop="time" width="190px" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-popover v-if="state === '3'" effect="light" trigger="hover" placement="left">
          <template #default>
            <div>确认收货</div>
          </template>
          <template #reference>
            <el-button @click="receiving(scope.row.bookID, scope.row.produceID)" size="small" type="success" circle >收</el-button>
          </template>
        </el-popover>
        <el-popover effect="light" trigger="hover" placement="right">
          <template #default>
            <div>农产品溯源</div>
          </template>
          <template #reference>
            <el-button @click="gotoOrigin(scope.row.produceID)" size="small" type="primary" circle >溯</el-button>
          </template>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import request from "@/http/request";
import {ref, getCurrentInstance} from "vue";
const {CodeToText} = require("element-china-area-data/dist/app");
const {useRoute} = require("vue-router");

export default {
  name: "PayFarmCropsList",
  watch: {
    '$route.fullPath'(newVal) {
      if (newVal.includes('/payFarmCrops/payFarmCropsList')) {
        this.state = this.route.query.state;
        this.getPayFarmCropsByStatus();
      }
    }
  },
  data() {
    return {
      payFarmCropsTable: [],
    }
  },
  methods: {
    getPayFarmCropsByStatus() {
      request({
        url: "/book/userBookStatus",
        method: "get",
        params: {
          status: this.state,
        }
      }).then((response) => {
        if (response.code === 200) {
          this.payFarmCropsTable = response.data;
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
    gotoOrigin(produceID) {
      this.$router.replace({
        name: 'BookOrigin',
        params: {
          produceID: produceID,
        },
      })
    },
    receiving(bookID, produceID) {
      request({
        url: "/book/userConfirmBookHarvest",
        method: "post",
        data:{
          bookID: bookID,
          produceID: produceID,
        }
      }).then((response) => {
        if (response.code === 200) {
          this.getPayFarmCropsByStatus();
          this.$tipUtil.successTip(response.msg);
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
  },
  setup() {
    const { appContext : { config: { globalProperties } } } = getCurrentInstance();
    const staticResourcesUrl = globalProperties.$staticResourcesUrl;
    const route = useRoute();
    const state = ref(route.query.state);
    const stateCN = ['全部', '待付款', '待发货', '待收货', '已收货'];
    const stateTag = ['danger', 'info', '', 'warning', 'success'];
    return {
      CodeToText,
      staticResourcesUrl,
      route,
      state,
      stateCN,
      stateTag,
    }
  },
  mounted() {
    this.getPayFarmCropsByStatus();
  }
}
</script>

<style scoped>

</style>